import { SetupContext, ref } from 'vue';
import { ExtendPanelPropsType } from '../extend-panel.props';
import { itemRenderMethods } from '../composition/types';
import { ItemType, ItemDataType } from './types';
import itemContent from './item-content.components';
import itemCover from './item-cover.components';
export default function (
    props: ExtendPanelPropsType,
    context: SetupContext,
    methods: itemRenderMethods
) {
    const { onClickItem, checkedClassName, itemStyleVariable } = methods;
    const renderItem = (item: ItemType, key: number) => {
        const renderCover = itemCover(props,context,item,key);
        const renderContent = itemContent(props,context,item,key);
        return <div
            onClick={() => onClickItem(item, key)}
            class={checkedClassName(key)}
            style={itemStyleVariable(key)}>
            <div class='f-extend-panel-layout-item-custom'>
                <div class='f-extend-panel-layout-item-custom-cover'>
                    {renderCover()}
                </div>
                <div class='f-extend-panel-layout-item-custom-content' onClick={(e) => e.stopPropagation()} >
                    {renderContent()}
                </div>
            </div>
        </div>
    }
    return () => {
        return props.data.map((item: ItemType, key: number) => {
            return renderItem(item, key);
        })
    }
}